.minimap {
  .minimap-background {
    fill: rgba(0, 0, 0, 0.1);
  }

  .minimap-drag {
    fill: rgba(0, 0, 0, 0.2);
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1px;
    stroke-dasharray: 2px;
    stroke-dashoffset: 2px;
    cursor: pointer;

    &.panning {
      fill: rgba(0, 0, 0, 0.3);
    }
  }

  .minimap-nodes {
    opacity: 0.5;
    pointer-events: none;
  }
}

.graph {
  user-select: none;

  .edge {
    stroke: #666;
    fill: none;

    .edge-label {
      stroke: none;
      font-size: 12px;
      fill: #251e1e;
    }
  }

  .panning-rect {
    fill: rgba(0, 0, 0, 0);
    cursor: move;
  }

  .node-group {
    &.old-node {
      transition: transform 0.5s ease-in-out;
    }

    .node {
      &:focus {
        outline: none;
      }
    }
  }

  .compound-node rect {
    opacity: 0.5;
  }

  .cluster rect {
    opacity: 0.2;
  }
}
